<template>
    <div class="comment">
    <h1>{{ userInfoStore.userInfo.username }}</h1>
    <button 
    :class="{active: userInfoStore.userInfo.id === 1}"
    @click="userInfoStore.setUserInfo({id:1,username:'zhansan'})">
    张三
    </button>
    <button 
     :class="{active: userInfoStore.userInfo.id === 2}"
    @click="userInfoStore.setUserInfo({id:2,username:'lisi'})">
    李四
    </button>
    <button 
     :class="{active: userInfoStore.userInfo.id === 3}"
    @click="userInfoStore.setUserInfo({id:3, username:'wangwu'})">
    王五</button>
    <hr>
    <CommentOne />
    </div>
</template>
<script setup>
import useUserInfo from "../store/user.js";
import CommentOne from '../components/Comment/CommentOne.vue'
const userInfoStore = useUserInfo();

</script>
<style lang="scss">
.active{
    background-color: #000;
    color: #fff;
}
.comment{
    margin-left:30px;
}
</style>